﻿
@{
    Layout = null;
}

<link href="~/Content/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" />
<div class="portlet box blue" style="margin-top: 24px;">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-reorder"></i>
            ارسال عکس جدید
        </div>
        <div class="tools">
            <a href="javascript:;" class="collapse"></a>
            <a href="#portlet-config" data-toggle="modal" class="config"></a>
            <a href="javascript:;" class="reload"></a>
            <a href="javascript:;" class="remove"></a>
        </div>
    </div>
    <div class="portlet-body form">
        <form id="fileupload" data-upload-template-id="template-uploada" data-download-template-id="template-downloada" class="form-horizontal" action="/Image/Upload" method="POST" enctype="  art/form-data">
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="col-lg-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn green fileinput-button">
                        <i class="fa fa-plus"></i>
                        <span>
                            انتخاب فایل
                        </span>
                        <input type="file" name="file">
                    </span>
                    <button type="submit" class="btn blue start">
                        <i class="fa fa-upload"></i>
                        <span>
                            شروع ارسال
                        </span>
                    </button>
                    <button type="reset" class="btn yellow cancel">
                        <i class="fa fa-ban"></i>
                        <span>
                            لغو
                        </span>
                    </button>
                    <input type="checkbox" class="toggle">
                    <!-- The loading indicator is shown during file processing -->
                    <span class="fileupload-loading">
                    </span>
                </div>
                <!-- The global progress information -->
                <div class="col-lg-5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width:0%;">
                        </div>
                    </div>
                    <!-- The extended global progress information -->
                    <div class="progress-extended">
                        &nbsp;
                    </div>
                </div>
            </div>
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped clearfix">
                <tbody class="files"></tbody>
            </table>

        </form>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">...</h3>
            </div>
            <div class="panel-body">
                <div>
                    <input type="hidden" name="BoardId" id="boardId" value="@ViewBag.BoardId" />
                    <input type="text" id="tags_edit" style="display:inline; float:left" />
                    <input type="text" id="description" name="Description"
                           class="form-control tahomaFont" style="width:80%;
                     margin-left:auto; margin-right:auto;" placeholder="توضیحات" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="footer">
    <div class="footer-inner" id="sample">
        @*پیاده سازی توسط سید حسن هاشمی*@
        HassanHashemi@yahoo.com
    </div>
    <div class="footer-tools">
        @*<span class="go-top">
                  <i class="fa fa-angle-up"></i>
            </span>*@
    </div>
</div>
@Html.Partial("PhotoFileUploadTemplates")

<script src="~/Content/assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="~/Content/assets/scripts/form-fileupload.js"></script>

<script>
    var lastTextBox = null;

    function resetForm() {
        $('#description').val('');
        $('#tags_edit').importTags('');
    }

    jQuery(document).ready(function () {
        currentTags = new Array();
        var getDescription = function () {
            return $('#description').val();
        };
        $('#tags_edit').tagsInput({
            defaultText: 'برچسپ ها',
            width: '100%',
            onAddTag: function (t) {
                $('#tags_edit').focus();
                currentTags.push(t);
            },
            onRemoveTag: function (t) {
                for (var item in currentTags) {
                    if (currentTags[item] == t) {
                        currentTags.splice(item, 1);
                    }
                }
            }
        });

        FormFileUpload.init();

        uploader = $('#fileupload').fileupload('option', {
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 5000000,
            formData: {

            },
            multiple: false,
            maxNumberOfFiles: 1,
            url: '/ImagePin/Upload',
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                var message =
                    $('<div class="alert alert-success" style="text-align:left; direction:ltr;">'
                         + 'با موفقیت ارسال شد' +
                    '</div>')
                message.appendTo('#fileupload');
                setTimeout(function () { message.fadeOut() }, 5000000);
                resetForm();
            },
            acceptFileTypes: /(\.|\/)(|jpg)$/i
        }).bind('fileuploadsubmit', function (e, data) {
            var input = $('#input');
            data.formData =
                {
                    rawTags: currentTags,
                    boardId: $('#boardId').val(),
                    description: $('#description').val(),
                };
        });
    });
</script>